<template>
  <div class="tableMain">
    <!-- table -->
    <el-table
      :data="tableData"
      :height="height"
      row-key="id"
      border
      style="width: 100%;"
      @selection-change="handleSelectionChange"
      :row-class-name="tableRowClassName"
    >
      <el-table-column
        v-if="isSelect"
        type="selection"
        width="55"
        align="center"
      ></el-table-column>
      <el-table-column
        v-for="(item, index) in columuData"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :align="item.align"
        show-overflow-tooltip
      ></el-table-column>
    </el-table>
    <!-- pagination -->
    <div class="paginationBox" v-if="pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="pagination.currentPage"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="pagination.pageSize"
        layout="total, prev, pager, next"
        :total="pagination.total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    columuData: {
      // 表头
      type: Array,
      require: true,
    },
    tableData: {
      //表格数据
      type: Array,
      require: true,
    },
    rowColor: {
      // 是否隔行变色
      type: Boolean,
      default: true,
    },
    height: Number, // 表格高度： 设置以后是固定头部的效果
    isSelect: Boolean, // 是否添加Checkbox
    pagination: Object, // 翻页数据，不传不展示分页
  },
  data() {
    return {
      multipleSelection: [],
    }
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (this.rowColor) {
        if (rowIndex % 2 == 1) {
          return 'green-row'
        }
        return ''
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.$emit('handleSelectionChange', JSON.stringify(val))
    },
    handleCurrentChange(val) {
      this.$emit('handleCurrentChange', val)
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/globalVariable.scss';
.paginationBox {
  @include flex(flex-end);
  position: relative;
  z-index: 200;
  padding: 10px 0;
  :deep .el-pagination {
    button:disabled {
      background: none;
    }
    button:hover {
      color: #fff;
    }
    .btn-prev,
    .btn-next {
      color: #fff;
      background: none;
    }
    .el-pagination__total {
      color: #fff;
    }
    .el-pager li {
      background: none;
      color: #fff;
      &.active {
        color: #409eff !important;
        font-weight: bold;
      }
    }
  }
}
</style>
